<script setup lang="ts">
import {useRouter} from "vue-router";
//获取路由器对象
let $router = useRouter();
//点击医院卡片的时候跳转到医院详情页面
const goDetail = () => {
    $router.push({path: "/hospital/register", query: {hoscode: props.hospitalInfo.hoscode}});
};
//接受父组件传递过来的props->即为已有的医院的数据
let props = defineProps(["hospitalInfo"]);
</script>

<template>
    <el-card class="box-card" shadow="hover" @click="goDetail">
        <div class="content">
            <div class="left">

                <div class="hospital_name">{{ hospitalInfo.hosname }}</div>
                <div class="tip">
                    <div class="zan">
                        <svg t="1739279269863" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4215" width="16" height="16">
                            <path
                                d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667zM544.256 149.333333c39.253333 0 59.498667 36.48 49.888 84.928-7.573333 38.144-21.984 104.426667-43.221333 198.666667-4.512 20.021333 10.56 39.093333 30.912 39.093333h218.666666c6.101333 0 12.16 1.066667 17.909334 3.168 27.445333 9.984 41.674667 40.554667 31.776 68.266667l-85.568 239.573333C744.981333 838.026667 693.301333 874.666667 635.402667 874.666667H223.498667C194.314667 874.666667 170.666667 850.784 170.666667 821.333333V503.498667c0-17.866667 14.144-32.448 31.829333-32.821334l21.866667-0.469333a221.12 221.12 0 0 0 167.381333-82.56c34.346667-42.602667 59.146667-99.306667 74.869333-169.877333C482.101333 166.336 499.552 149.333333 544.266667 149.333333z"
                                fill="#000000" p-id="4216"></path>
                        </svg>
                        <span>{{ hospitalInfo.param.hostypeString }}</span>

                    </div>
                    <div class="time">
                        <svg t="1739279573912" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5604" width="30" height="30">
                            <path
                                d="M194.873469 894.432653c-5.746939 0-12.016327-2.089796-16.718367-6.791837-9.404082-9.404082-9.404082-24.032653 0-33.436734L266.44898 765.910204c9.404082-9.404082 24.032653-9.404082 33.436734 0 9.404082 9.404082 9.404082 24.032653 0 33.436735l-88.293877 88.293877c-4.702041 4.179592-10.44898 6.791837-16.718368 6.791837zM833.828571 894.432653c-5.746939 0-12.016327-2.089796-16.718367-6.791837L728.816327 799.346939c-9.404082-9.404082-9.404082-24.032653 0-33.436735s24.032653-9.404082 33.436734 0l88.293878 88.293878c9.404082 9.404082 9.404082 24.032653 0 33.436734-4.179592 4.179592-10.44898 6.791837-16.718368 6.791837z"
                                fill="#AF8015" p-id="5605"></path>
                            <path
                                d="M514.612245 894.432653c-46.497959 0-91.428571-8.881633-133.746939-27.167347-40.75102-17.240816-77.322449-41.795918-109.191837-73.665306s-55.902041-67.918367-73.142857-108.669388c-17.763265-42.318367-27.167347-87.24898-27.167347-133.746939S180.767347 460.277551 198.530612 417.959184c17.240816-40.75102 41.795918-77.322449 73.665306-109.191837s67.918367-55.902041 108.669388-73.665306c42.318367-17.763265 87.24898-27.167347 133.746939-27.167347s91.428571 8.881633 133.746939 27.167347c40.75102 17.240816 77.322449 41.795918 109.191836 73.665306s55.902041 68.440816 73.142858 109.191837c17.763265 42.318367 27.167347 87.24898 27.167346 133.746938s-8.881633 91.428571-27.167346 133.746939c-17.240816 40.75102-41.795918 77.322449-73.665307 109.191837s-67.918367 55.379592-109.191836 72.620408c-42.318367 18.285714-86.726531 27.167347-133.22449 27.167347z"
                                fill="#F2CB51" p-id="5606"></path>
                            <path
                                d="M514.612245 833.828571c-38.138776 0-75.232653-7.314286-109.714286-21.942857-33.436735-14.106122-63.738776-34.481633-89.861224-60.604081s-46.497959-55.902041-60.604082-89.861225c-14.628571-35.004082-21.942857-71.57551-21.942857-109.714286 0-38.138776 7.314286-75.232653 21.942857-109.714285 14.106122-33.436735 34.481633-63.738776 60.604082-89.861225S370.938776 305.632653 404.897959 291.526531c35.004082-14.628571 71.57551-21.942857 109.714286-21.942858 38.138776 0 75.232653 7.314286 109.714286 21.942858 33.436735 14.106122 63.738776 34.481633 89.861224 60.604081s46.497959 55.902041 60.604082 89.861225c14.628571 35.004082 21.942857 71.57551 21.942857 109.714285 0 38.138776-7.314286 75.232653-21.942857 109.714286-14.106122 33.436735-34.481633 63.738776-60.604082 89.861225s-55.902041 46.497959-89.861224 60.604081c-34.481633 14.106122-71.57551 21.942857-109.714286 21.942857z"
                                fill="#FFF4D7" p-id="5607"></path>
                            <path
                                d="M857.861224 353.697959c-6.269388 0-12.016327-2.612245-16.718367-6.791837l-146.808163-146.808163c-9.404082-9.404082-9.404082-24.032653 0-33.436735 49.632653-49.632653 130.089796-49.632653 179.722449 0s49.632653 130.089796 0 179.722449c-4.179592 4.702041-9.926531 7.314286-16.195919 7.314286zM171.363265 353.697959c-6.269388 0-12.016327-2.612245-16.718367-6.791837-49.632653-49.632653-49.632653-130.089796 0-179.722449s130.089796-49.632653 179.722449 0c9.404082 9.404082 9.404082 24.032653 0 33.436735l-146.285714 146.285714c-4.702041 4.179592-10.44898 6.791837-16.718368 6.791837z"
                                fill="#E5404F" p-id="5608"></path>
                            <path
                                d="M517.22449 574.693878H344.816327c-13.061224 0-23.510204-10.44898-23.510205-23.510205s10.44898-23.510204 23.510205-23.510204h172.408163c13.061224 0 23.510204 10.44898 23.510204 23.510204s-10.971429 23.510204-23.510204 23.510205z"
                                fill="#AA1D32" p-id="5609"></path>
                            <path
                                d="M517.22449 574.693878c-13.061224 0-23.510204-10.44898-23.510204-23.510205V330.187755c0-13.061224 10.44898-23.510204 23.510204-23.510204s23.510204 10.44898 23.510204 23.510204v220.995918c0 13.061224-10.971429 23.510204-23.510204 23.510205z"
                                fill="#E5404F" p-id="5610"></path>
                        </svg>
                        <span>每天{{ hospitalInfo.bookingRule?.releaseTime }}放号</span>
                    </div>
                </div>

            </div>
            <div class="right">
                <img :src="`data:image/jpeg;base64,${hospitalInfo.logoData}`" alt=""/>
            </div>
        </div>
    </el-card>
</template>

<style scoped lang="scss">
.content {
    display: flex;
    justify-content: space-between;

    .right img {
        width: 50px;
        height: 50px;
    }

    .left {
        width: 60%;

        .tip {
            color: #7f7f7f;
            margin-top: 20px;
            display: flex;
            justify-content: space-between;

            .zan, .time {
                display: flex;
                align-items: center;

                span {
                    margin-left: 5px;
                }
            }
        }
    }
}
</style>